Vue3#20787
Conversation
|
Very exciting stuff - thank you so much! Would you be okay if I wrote a wrapper Vue test mount that would allow us to use either of these patterns based on what version is available? I feel like we can start migrating all the tests without the upgrade that way. We an use the new paradigms now and it would simplify this branch a lot of getting using paradigms that will reduce conflicts in the future. Also I think the upgrade of prettier in the middle there seems like it is a causing a lot of unrelated changes. Is it possible we can pull that out and apply to our current codebase or that we can remove it and apply it after the Vue 3 migration is done? |
8e8bdf8 to
fe3fdcb
Compare
|
Post-release-rebase update: The branch builds and runs successfully with all TypeScript errors resolved. Selenium testing found a few reactivity issues - collection builders weren't emitting events properly (fixed by swapping @update to @input), the workflow editor has some step update problems, and there's an accessibility issue with the dataset library multiselect. On the Jest side, tests are blocked because Babel transforms our Vue Router 4 ESM imports to CommonJS, which breaks Vue Router's conditional exports. I'm experimenting with Vitest as an alternative since we want to migrate to it anyway for the better Vite integration - got Bootstrap Vue and vue-rx mocked successfully, but components with slots still fail because of how @vue/compat handles rendering. Just trying to figure out the right order of operations here - whether to push through on Vitest now, stick with Jest until we're fully on Vue 3, or some hybrid approach. |
|
Can you update the lock file so we can see the tests ? |
98ec6ef to
7a92e2f
Compare
5909563 to
e399b43
Compare
bc044ad to
b3cfc95
Compare
|
@dannon what would be the best way to work on the upgrades and fixes?
Regarding |
|
@davelopez Was just rebasing this and see your comment -- so sorry I missed it! Yeah, just push here or however you prefer, no worries! |
Forward dismiss event from DefaultBox, wait for modal hide to prevent element click interception in Vue 3.
Add name prop to all Multiselect components to fix invalid aria-label attribute. vue-multiselect generates aria-label as 'name-searchbox', so when name is empty it becomes '-searchbox' which is invalid.
- Change @vitejs/plugin-vue2 to @vitejs/plugin-vue - Add vue → @vue/compat alias for Vue 3 compatibility mode - Add vue/dist/vue.esm.js alias pointed to @vue/compat - Configure template compiler with compatConfig MODE: 2 - Update build-config.shared.js vue alias to use @vue/compat
portal-vue uses Vue.extend which doesn't exist in Vue 3. This adds: - A Vite plugin to intercept portal-vue imports and redirect to mock - Mock portal-vue module using Vue 3's Teleport component - bootstrap-vue ESM alias for better Vite transformation
Replace Vue 2 config (Vue.config.productionTip) with @vue/compat configureCompat call. Suppress expected migration warnings for Vue 2 features used in tests.
- Remove createLocalVue (not available in VTU v2) - Return global mount options object for mount() - Add bootstrap-vue component stubs (incompatible with Vue 3) - Remove vue-rx and bootstrap-vue plugins (Vue 2 only) - Update createTestRouter with catch-all route
Use $scopedSlots (Vue 2 compat API) with fallback to $slots for passing slot props in render function. The pure Vue 3 renderSlot() doesn't work correctly with compat mode's slot handling.
Configure shouldFailOnWarn to show Vue compat mode warnings without failing tests. This allows migration to proceed while keeping warnings visible for tracking progress.
Switched to createRouter/createWebHistory, added setActivePinia call, and suppress Vue compat warnings during migration.
Created adapters that allow old Vue 2 test patterns to work without modifying
individual test files:
- vue-test-utils-adapter.ts: Transforms { global: localVue, pinia, router }
mount options to proper VTU v2 format with plugins array
- vue-router-adapter.ts: Provides VueRouter constructor for tests using the
old `import VueRouter from 'vue-router'` and `new VueRouter()` pattern
- helpers.js: Added .use() method to getLocalVue() for localVue.use() calls
- setup.ts: Relaxed fail-on-console to not fail on Vue compat warnings
These adapters are a bridge during migration - tests can be updated to use
proper Vue 3 patterns incrementally while the adapters keep things working.
- Add missing vi import in PersistentTaskProgressMonitorAlert test - Remove duplicate jest helper imports (now using vitest helpers) - Update VueRouter usage to v4 pattern with createTestRouter() - Change wrapper.destroy() to wrapper.unmount() (VTU v2 API) - Change propsData to props in mount options (VTU v2 API)
Vue Router 4 deprecates the next() callback in favor of returning values from navigation guards. beforeRouteEnter is the one exception (still needs next(vm => ...)) since the component instance isn't available yet — DataManager.vue is left as-is for that reason.
Uses the existing createConfiguredApp-based mounting utility instead of the Vue 2 Vue.extend() + new constructor().$mount() pattern.
Replace vue2-teleport with native Vue 3 Teleport in HeadlessMultiselect, and drop vue-class-component and vue-property-decorator which have no remaining imports in the codebase.
- Remove duplicate v-bind attributes in storage overview charts - Move v-for key to <template> tag in GTable (Vue 3 requirement) - Replace vue-router/composables imports with vue-router (VR4 path) - Remove Vue.set() usage, use direct property assignment (Vue 3 Proxy) - Update eslint wrapper for flat config (eslint.config.mjs)
GTable: move :key to <template v-for> per Vue 3 requirement. FormData: remove duplicate v-model:workflow-tab and convert remaining :formats-visible.sync to v-model:formats-visible. Also regenerate pnpm-lock.yaml after package.json conflicts during rebase onto upstream/dev.
setup.ts referenced an undefined `Vue` global to register the g-tooltip mock directive. In Vue 3 / VTU v2 there is no global Vue constructor; register the directive on `config.global.directives` so it is applied to every test mount. This unblocks ~112 test files that were failing at setup time with 'Vue is not defined'.
- historyStore: replace Vue 2 set()/del() with direct property assignment / delete operator. del() was undefined and threw at runtime in tests. - Test files: replace wrapper.destroy() with wrapper.unmount() for Vue Test Utils v2. - Test files: add explicit describe/it/expect imports where missing (vitest globals are disabled). Addresses ~30 of the remaining test failures (delete operator, VTU v2 unmount API, missing vitest globals). Heading slot rendering and BootstrapVue compat-mode issues still account for the bulk of the remaining failures.
happy-dom does not provide Worker, which breaks tests that import composables using web workers (filter, selectMany). Add a MockWorker to the global vitest setup mirroring the existing BroadcastChannel mock. The two test mock helpers (filter.ts, selectMany.ts) called `vi.mock` without importing `vi`. With `globals: false` in vitest.config.mts that throws ReferenceError. Import `vi` explicitly.
The test migration is still a giant pain, there are warnings, but the app builds, runs, and much of it does work. Very obviously still a work in progress, but I'm making this into a PR for at least a little more visibility, hoping to reduce conflicts and recruit folks to help test manually, fix tests, etc.
I will try to keep this rebased frequently so the branch doesn't slip away into the darkness yet again. (and, I rebased yesterday and it's already got 6 conflicted files)
Also, I have separated this from the vite branch as that actually (somewhat unexpectedly) had evenmore blockers than this one did. We still want to swap over, but we can push this one first at this point. The previous perceived dependency on the vite migration was primarily typescript errors we have for the most part now addressed in the build.
Unit test status (~10% failing, which is still a lot.)

Notes:
STATUS AND TASK LIST
Vue 3 Migration - Parallel Work Task List
Current Status (2026-01-13)
vue3-2025-07(~230 commits ahead of dev)Narrative Summary: Understanding the Failures
The Core Problem: Bootstrap-Vue + @vue/compat Slot Incompatibility
The biggest blocker is Bootstrap-Vue's incompatibility with Vue 3's
@vue/compatmode. This manifests as:Why this happens: Bootstrap-Vue was built for Vue 2's slot API. Vue 3 fundamentally changed how slots work internally. The
@vue/compatcompatibility layer handles most Vue 2 patterns, but Bootstrap-Vue's internal slot manipulation triggers edge cases where the rendering context (currentRenderingInstance) is null when it shouldn't be.Components affected:
BPopover- 8 files using itBTable- 39 files using itBModalwith custom slotsBTabs/BTabThis is why many tests show "empty DOMWrapper" errors - the components aren't rendering because of these slot errors.
Secondary Issues
1. Vue Test Utils v1 → v2 API Changes
We've built adapters to handle most of these, but some tests still use old patterns:
wrapper.destroy()→wrapper.unmount()propsData→props2. Axios Mock Issues
Tests that use
axiosdirectly (not through our API client) hit mock configuration issues with Vitest's different mocking approach.3. Console Warning Failures
We use
vitest-fail-on-consoleto catch unexpected warnings. Many Vue compat deprecation warnings trigger test failures. We've suppressed common ones, but some leak through.4. Store Setup Issues
Some tests don't properly set up required Pinia stores (e.g.,
provideScopedWorkflowStores).Parallelizable Task List
Category A: Quick Fixes (Individual files, no dependencies)
These can be done in parallel by anyone. Each is a small, self-contained fix.
PersistentTaskProgressMonitorAlert.test.tsimport { vi } from 'vitest'ObjectStoreBadge.test.tstests/jest/helpers→@tests/vitest/helpersFormData.test.tstests/jest/helpers→@tests/vitest/helpersFormSelectMany.test.tsToolsList.test.tsCategory B: VTU v2 API Updates (Pattern-based, can be split)
Fix tests using deprecated Vue Test Utils v1 patterns.
wrapper.destroy()wrapper.unmount()propsDatapropsin mount optionsvi.spyOn()on non-functionHow to find these:
Category C: Bootstrap-Vue Slot Issues (Requires component changes)
These tests fail because the components use Bootstrap-Vue components with slots. Two options for each:
TemplateSummaryPopover.vueInstanceDropdown.vueEditSecretsForm.vueVaultSecret.vueCategory D: Store/Context Setup Issues
Tests failing because required context/stores aren't set up.
WorkflowInvocationState.test.tsprovideScopedWorkflowStoresJobStep.test.tsFix approach: Add proper store setup in test's
beforeEach:Category E: Major Component Migrations (Blocking decisions)
These require team decision on approach before proceeding.
Category F: Test Infrastructure
vitest-fail-on-consolerulestests/vitest/__mocks__/axios.jsif neededtests/vitest/helpers.jsmay need more compatibility shimsPriority Order
Phase 1: Quick Wins (Unblocks ~10 tests)
Phase 2: Pattern Fixes (Unblocks ~30-50 tests)
Phase 3: Strategic Decisions
Phase 4: Component Replacements (if needed)
How to test the changes?
(Select all options that apply)
License